<template>
  <div class="order-view">
    <el-dialog
      title="入库单 - 详情"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <template>
        <div>
          <el-descriptions title="入库单详情">
            <el-descriptions-item label="入库单编号">{{
                tabData.stockInCode
              }}
            </el-descriptions-item>
            <el-descriptions-item label="订单编号">{{
                tabData.orderCode
              }}
            </el-descriptions-item>
            <el-descriptions-item label="入库类型">{{
                tabData.typeName
              }}
            </el-descriptions-item>
            <el-descriptions-item label="仓库名称">{{
                tabData.houseName
              }}
            </el-descriptions-item>
            <el-descriptions-item label="合格数量">{{
                tabData.passNum
              }}
            </el-descriptions-item>
            <el-descriptions-item label="不合格数量">{{
                tabData.noPassNum
              }}
            </el-descriptions-item>
            <el-descriptions-item label="总数量">{{
                tabData.totalNum
              }}
            </el-descriptions-item>
            <el-descriptions-item label="合格率">{{
                tabData.passRate * 100 + "%"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="合格成本">{{
                tabData.passCost
              }}
            </el-descriptions-item>
            <el-descriptions-item label="总成本">{{
                tabData.cost
              }}
            </el-descriptions-item>
            <el-descriptions-item label="创建人">{{
                tabData.createBy
              }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
                tabData.createDate
              }}
            </el-descriptions-item>
            <el-descriptions-item label="修改人">{{
                tabData.updateBy
              }}
            </el-descriptions-item>
            <el-descriptions-item label="修改时间">{{
                tabData.updateDate
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-table :data="stockInDetailList" style="width: 100%">
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="proName"/>
          <el-table-column label="入库数量" align="center" prop="num"/>
          <el-table-column label="不合格数量" align="center" prop="noPassNum"/>
          <el-table-column label="总数量" align="center" prop="totalNum"/>
          <el-table-column label="合格率" align="center" prop="passRate">
            <template slot-scope="scope">
              {{ scope.row.passRate * 100 + "%" }}
            </template>
          </el-table-column>
          <el-table-column label="成本" align="center" prop="cost"/>
          <el-table-column label="合格成本" align="center" prop="passCost"/>
          <el-table-column label="总成本" align="center" prop="costAll"/>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "StockInView",
  props: ["viewData"],
  data() {
    return {
      tabData: this.viewData,
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      stockInDetailList: [],
    };
  },
  watch: {
    viewData(newValue) {
      this.tabData = newValue;
      this.getList()
    }
  },
  methods: {
    handleClose(done) {
      done();
    },
    showView() {
      this.dialogVisible = true;
    },
    getList() {
      this.queryParams.stockInId = this.tabData.id;
      request({
        url: '/store/stockInDetail/list',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        this.stockInDetailList = res.rows;
        this.total = res.total;
      });
    }
  },
};
</script>
